﻿@using System.Collections
@using NetCoreCMS.ImageSlider.Models.Entities

@model NccImageSlider
<strong>From Theme</strong>

@if (Model != null)
{
    <div style="@Model.ContainerStyle">
        <div id="nccImageSlider" class="carousel slide" data-ride="carousel" data-interval="@(Model.Interval * 1000)">
            @if (Model.ShowNav == true)
            {
                <ol class="carousel-indicators">
                    @{var i = 0; }
                    @foreach (var item in Model.ImageItems)
                    {
                        if (i == 0)
                        {
                            <li data-target="#nccImageSlider" data-slide-to="@i" class="active"></li>
                        }
                        else
                        {
                            <li data-target="#nccImageSlider" data-slide-to="@i"></li>
                        }
                        i++;
                    }
                </ol>
            }
            <div class="carousel-inner" role="listbox">
                @{var j = 0; }
                @foreach (var item in Model.ImageItems)
                {
                    if (j == 0)
                    {
                        <div class="item active">
                            <img src="@item.Path" alt="Ncc Slider Image" class="img-responsive" width="@Model.ImageWidth" height="@Model.ImageHeight">
                            <div class="carousel-caption" role="option">
                                <p>
                                    @Html.Raw(item.Description)
                                </p>
                            </div>
                        </div>
                    }
                    else
                    {
                        <div class="item">
                            <img src="@item.Path" alt="Ncc Slider Image" class="img-responsive" width="@Model.ImageWidth" height="@Model.ImageHeight">
                            <div class="carousel-caption" role="option">
                                <p>
                                    @Html.Raw(item.Description)
                                </p>
                            </div>
                        </div>
                    }
                    j++;
                }
            </div>
            @if (Model.ShowSideNav == true)
            {
                <a class="left carousel-control" href="#nccImageSlider" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#nccImageSlider" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            }
        </div>
    </div>
}